<template>
  <div class="ranking-list table-theme" v-if="filiale_id != 2">
    <el-card>
      <div class="ranking-title">商家{{ title }}推广排行榜</div>
      <div class="top-menu">
        <div class="menu-left">
          <div class="type-view">
            <div
              class="client-item"
              v-for="(item, index) in timeList"
              @click="timeSelect(item.value, item.label)"
              :key="index"
              :class="[time == item.value ? 'client-item-active' : '']"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <p class="data-number">数据总数：{{ total }}</p>
      <el-table :data="wList">
        <el-table-column label="排名" align="center" prop="">
          <template slot-scope="scope">
            <el-tag>{{ scope.$index + 1 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="店铺ID"
          align="center"
          prop="store_id"
        ></el-table-column>
        <el-table-column label="店铺名" align="center">
          <template slot-scope="scope">
            {{ scope.row.store ? scope.row.store.store_name : "" }}
          </template>
        </el-table-column>
        <el-table-column label="店铺logo" align="center" prop="">
          <template slot-scope="scope">
            <ImgPopover
              :src="scope.row.store ? scope.row.store.store_logo : ''"
            ></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="增长人数"
          align="center"
          prop="counts"
        ></el-table-column>
        <el-table-column
          label="推广总人数"
          align="center"
          prop="store_count"
        ></el-table-column>
        <el-table-column
          label="跟单员"
          align="center"
          prop="service_name"
        ></el-table-column>
        <el-table-column label="跟单员ID" align="center">
          <template slot-scope="scope">
            {{ scope.row.store ? scope.row.store.service_id : "" }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :page-size="30"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  components: {
    ImgPopover,
  },
  data() {
    return {
      title: "全部",
      time: 0,
      timeList: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: "today",
          label: "本日",
        },
        {
          value: "yesterday",
          label: "昨日",
        },
        {
          value: "week",
          label: "本周",
        },
        {
          value: "lastWeek",
          label: "上周",
        },
        {
          value: "month",
          label: "本月",
        },
        {
          value: "lastMonth",
          label: "上个月",
        },
        {
          value: "year",
          label: "今年",
        },
        {
          value: "lastYear",
          label: "上一年",
        },
      ],
      wList: [],
      total: 0,
      totalData: 0,
      page: 0,
      filiale_id: 1,
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 30,
        time: this.time == 0 ? "" : this.time,
      };

      this.$http(this.$ApiList.StoreUserRank, data).then((res) => {
        this.wList = res.datas;
        this.total = res.count;
      });
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.init();
    },
    timeSelect(time, title) {
      this.time = time;
      this.title = title;
      this.init();
    },
  },
  created() {
    this.init();
    this.filiale_id = localStorage.getItem("filiale_id");
  },
};
</script>
<style lang="scss" scoped>
.ranking-list {
  .data-filtering-left {
    display: flex;
  }

  .ranking-title {
    font-size: 26px;
    font-weight: bold;
  }
  .type-view {
    display: flex;

    .client-item {
      margin-right: 40px;
      line-height: 40px;
      color: rgba(153, 153, 153, 1);
      cursor: pointer;
    }

    .client-item-active {
      color: #333333 !important;
      border-bottom: 4px solid #34a1e0;
    }
  }
}
</style>
